<template>
	<view class="thorui-loading__2 mt-10" :style="{ 'padding-top': top + 'rpx', 'text-align': textalign }" v-show="show">
		<view class="thorui-ani__1 bg-primary"></view>
		<view class="thorui-ani__2 bg-primary"></view>
		<view class="bg-primary"></view>
	</view>
</template>

<script setup>
	const props = defineProps({
		show: {
			type: Boolean,
			default: true
		},
		textalign: {
			type: String,
			default: "center"
		},
		top: {
			type: Number,
			default: 0,
		}
	})
</script>

<style lang="scss" scoped>
	.thorui-loading__2 view {
		width: 36rpx;
		height: 36rpx;
		border-radius: 36rpx;
		display: inline-block;
		-webkit-animation: tui_ani 1.4s infinite ease-in-out;
		animation: tui_ani 1.4s infinite ease-in-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.thorui-loading__2 .thorui-ani__1 {
		-webkit-animation-delay: -0.30s;
		animation-delay: -0.30s;
	}

	.thorui-loading__2 .thorui-ani__2 {
		-webkit-animation-delay: -0.15s;
		animation-delay: -0.15s;
	}

	@keyframes tui_ani {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0)
		}

		40% {
			-webkit-transform: scale(1)
		}
	}
</style>